// 帖子列表页面交互逻辑

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有帖子项
    const postItems = document.querySelectorAll('.post-item');
    
    // 为每个帖子项添加点击事件
    postItems.forEach(post => {
        // 获取帖子ID（从data属性或URL中提取）
        const postId = post.getAttribute('data-post-id');
        
        // 如果有帖子ID，添加点击事件
        if (postId) {
            post.addEventListener('click', function() {
                // 跳转到帖子详情页
                window.location.href = `/posts/${postId}`;
            });
            
            // 添加鼠标悬停效果，表示可点击
            post.style.cursor = 'pointer';
            post.addEventListener('mouseenter', function() {
                this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                this.style.transform = 'translateY(-2px)';
                this.style.transition = 'all 0.3s ease';
            });
            
            post.addEventListener('mouseleave', function() {
                this.style.boxShadow = 'none';
                this.style.transform = 'translateY(0)';
            });
        }
    });
    
    // 处理视频点击事件，防止与帖子点击事件冲突
    const videos = document.querySelectorAll('.post-item video');
    videos.forEach(video => {
        video.addEventListener('click', function(e) {
            // 阻止事件冒泡到帖子项
            e.stopPropagation();
            
            // 切换视频播放状态
            if (this.paused) {
                this.play();
            } else {
                this.pause();
            }
        });
    });
    
    // 处理评论按钮点击事件
    const commentButtons = document.querySelectorAll('.comment-btn');
    commentButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            // 阻止事件冒泡到帖子项
            e.stopPropagation();
            
            // 获取最近的帖子项
            const postItem = this.closest('.post-item');
            if (postItem) {
                const postId = postItem.getAttribute('data-post-id');
                if (postId) {
                    // 跳转到帖子详情页并滚动到评论区
                    window.location.href = `/posts/${postId}#comments-section`;
                }
            }
        });
    });
    
    // 添加分类选择功能
    const categoryFilter = document.getElementById('categoryFilter');
    if (categoryFilter) {
        // 加载所有分类到筛选下拉框
        loadCategoriesForFilter(categoryFilter);
        
        // 添加分类筛选事件
        categoryFilter.addEventListener('change', function() {
            const selectedCategory = this.value;
            filterPostsByCategory(selectedCategory);
        });
    }
});

// 加载分类到筛选下拉框
function loadCategoriesForFilter(selectElement) {
    // 发送请求获取所有分类
    fetch('/api/categories')
        .then(response => {
            if (!response.ok) {
                throw new Error('获取分类失败');
            }
            return response.json();
        })
        .then(data => {
            if (data.success && data.data) {
                // 添加"全部"选项
                const allOption = document.createElement('option');
                allOption.value = 'all';
                allOption.textContent = '全部分类';
                allOption.selected = true;
                selectElement.appendChild(allOption);
                
                // 添加分类选项
                data.data.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.name;
                    option.textContent = category.displayName;
                    selectElement.appendChild(option);
                });
            }
        })
        .catch(error => {
            console.error('获取分类列表失败:', error);
        });
}

// 根据分类筛选帖子
function filterPostsByCategory(category) {
    if (category === 'all') {
        // 如果选择"全部"，刷新页面获取所有帖子
        window.location.href = '/';
    } else {
        // 否则，跳转到分类页面
        window.location.href = `/posts/category/${category}`;
    }
}